<template>
    <div>
        <a-modal
            v-model:visible="applicationFormVisible"
            title="特殊事项申请"
            width="100%"
            wrapClassName="reimbursementApplication-modal-Lu">
            <a-spin :spinning="tloading">
                <div style="width: 100%;margin: 0 auto;">
                    <div class="reimbursementApplication-modal-summary-table">
                        <div class="tabs-card-edit-box">
                            <a-tabs type="card" v-model:activeKey="summaryActiveKey">
                                <a-tab-pane key="特殊事项" tab="特殊事项"></a-tab-pane>
                            </a-tabs>
                        </div>
                        <div  class="tab-box-v1">
                            <div v-if="summaryActiveKey == '特殊事项'" class="internalControl-reimbursement-summary-1">
                                <div v-for="(item,index) in allSpecialList" :key="index" style="margin-bottom: 15px;">
                                    <div class="table-hear">
                                        <h3>xx壮族自治区食品药品审评查验中心报账特殊情况申请表</h3>
                                    </div>
                                    <table class="reimbursement-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: 60%;margin: 0 auto;border-color: #d9d9d9 !important;">
                                        <tr style="background: #dee5ed !important;">
                                            <th colspan="4">审评内容</th>
                                        </tr>
                                        <tr>
                                            <td class="special-table-lable-td">项目内容</td>
                                            <td colspan="3">{{ formState.fxmnr }}</td>
                                        </tr>
                                        <tr>
                                            <td class="special-table-lable-td">项目时间</td>
                                            <td>{{ formState.fxmsj }}</td>
                                            <td class="special-table-lable-td">申请人</td>
                                            <td>{{ formState.fsqr }}</td>
                                        </tr>
                                        <tr>
                                            <td class="special-table-lable-td">申请日期</td>
                                            <td>
                                                <span>{{ item.fsqrq?moment(item.fsqrq).format('YYYY-MM-DD'):'' }}</span>
                                            </td>
                                            <td v-if="item.fsqlx !== '无单位派车'" class="special-table-lable-td">特殊情况申请天数</td>
                                            <td v-if="item.fsqlx !== '无单位派车'">
                                                <span>{{ item.fsqts }}</span>
                                            </td>
                                        </tr>
                                        <tr v-if="item.fsqlx !== '无单位派车'">
                                            <td class="special-table-lable-td">
                                                <div style="display: flex;justify-content: center;">
                                                    <span style="width: 64px;display: flex;justify-content: space-between;">
                                                        <span>金</span>
                                                        <span>额</span>
                                                    </span>
                                                </div>

                                            </td>
                                            <td>
                                                <span>{{ item.fsqje }}</span>
                                            </td>
                                        </tr>
                                        <tr style="background: #dee5ed !important;" v-if="item.fsqlx == '超期产生' || item.fsqlx == '超期产生和午休房'">
                                            <th colspan="4">超期产生额外费用报销填报</th>
                                        </tr>
                                        <tr v-if="item.fsqlx == '超期产生' || item.fsqlx == '超期产生和午休房'">
                                            <td class="special-table-lable-td">特殊情况说明</td>
                                            <td colspan="3" style="text-align: left;">
                                                <span>{{ item.fewfybxsm }}</span>
                                            </td>
                                        </tr>
                                        <tr style="background: #dee5ed !important;" v-if="item.fsqlx == '午休房' || item.fsqlx == '超期产生和午休房'">
                                            <th colspan="4">午休房报销填报</th>
                                        </tr>
                                        <tr v-if="item.fsqlx == '午休房' || item.fsqlx == '超期产生和午休房'">
                                            <td class="special-table-lable-td">项目地址</td>
                                            <td>
                                                <span>{{ item.fwxfbxxmdz }}</span>
                                            </td>
                                            <td class="special-table-lable-td">工作地址</td>
                                            <td>
                                                <span>{{ item.fwxfbxgzdz }}</span>
                                            </td>
                                        </tr>
                                        <tr v-if="item.fsqlx == '午休房' || item.fsqlx == '超期产生和午休房'">
                                            <!-- <td class="special-table-lable-td">申请人签字确认</td>
                                            <td colspan="3">
                                                <div style="display: flex;align-items: center;">
                                                    <a-textarea
                                                        :readOnly="true"
                                                        style="width: 100%;"
                                                        v-model="item.fwxfsqrxm"
                                                        :autosize="{ minRows: 1, maxRows: 10000 }"
                                                        placeholder="申请人签字确认"
                                                    ></a-textarea>
                                                    <a-button v-if="!isFbxdzt" class="blue-btn" style="margin-left: 10px;" type="primary" @click="noonBreakClick({id:item.id,fwxfsqrid:item.fwxfsqrid})">选择申请人</a-button>
                                                </div>
                                            </td> -->
                                        </tr>
                                        <tr style="background: #dee5ed !important;" v-if="item.fsqlx == '无单位派车' || item.fsqlx == '超期产生和无单位派车'">
                                            <th colspan="4">无单位派车报销填报</th>
                                        </tr>
                                        <tr v-if="item.fsqlx == '无单位派车' || item.fsqlx == '超期产生和无单位派车'">
                                            <td class="special-table-lable-td">无城市间交通费/无住宿说明</td>
                                            <td colspan="3" style="text-align: left;">
                                                <span>{{ item.fewfybxsm }}</span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 60%;margin: 0 auto;">
                        <a-form :form="cform" ref="form" class="internalControl-reimbursement-model-form-box">
                            <a-descriptions bordered style="width: 100%;">
                                <a-descriptions-item :span="3" v-if="descriptionsData('经办人审核').hjmc">
                                    <span slot="label" class="descriptions-label-slot">
                                        <span class="xhText" v-if="linkName == '经办人审核'">*</span>
                                        经办人审核
                                    </span>
                                    <a-form-item ref="fdjh" prop="fdjh" class="zm-form-model">
                                        <div style="width: 100%;" v-if="(descriptionsData('经办人审核').blzt == '待办' && linkName!=='我的已办') || linkName == '数据修订'">
                                            <reviewOpinions
                                                ref="reviewOpinionsReffjbryj"
                                                @getInputOpinion="getInputOpinion"
                                                @openOpinions="opinions('ideaType',formState.fjbryj,'fjbryj')"
                                                v-decorator="[
                                                'fjbryj', {initialValue:formState.fjbryj,rules: rules.fjbryj}]"
                                            />
                                            <div  v-if="linkName == '数据修订'" style="text-align: right;">
                                                <span>办理时间：</span>
                                                <a-date-picker
                                                    show-time
                                                    :v-model="moment(formState.fjbryjsj)"
                                                    :default-value="moment(formState.fjbryjsj)"
                                                    :allowClear="false"
                                                    @change="yjTimeChange($event,'fjbryjsj')"
                                                />
                                            </div>
                                        </div>
                                        <div style="width: 100%;" v-else>
                                            <p>{{ formState.fjbryj }}</p>
                                            <div class="yjqm-right-bottom">
                                                <img v-if="getUrl('经办人审核')" :src="getUrl('经办人审核')" alt="" class="yjqmImg"/>
                                                <span v-else class="yjqmImg">{{ formState.fjbrxm }}</span>
                                                <span>{{ formState.fjbryjsj }}</span>
                                            </div>
                                        </div>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item :span="3" v-if="descriptionsData('中心领导审核').hjmc">
                                    <span slot="label" class="descriptions-label-slot">
                                        <span class="xhText" v-if="linkName == '中心领导审核'">*</span>
                                        中心领导审核
                                    </span>
                                    <a-form-item ref="fjbks" prop="fjbks" class="zm-form-model">
                                        <div style="width: 100%;" v-if="(descriptionsData('中心领导审核').blzt == '待办' && linkName!=='我的已办') || linkName == '数据修订'">
                                            <reviewOpinions
                                                ref="reviewOpinionsReffzxldyj"
                                                @getInputOpinion="getInputOpinion"
                                                @openOpinions="opinions('ideaType',formState.fzxldyj,'fzxldyj')"
                                                v-decorator="[
                                                'fzxldyj', {initialValue:formState.fzxldyj,rules: rules.fzxldyj}]"
                                            />
                                            <div  v-if="linkName == '数据修订'" style="text-align: right;">
                                                <span>办理时间：</span>
                                                <a-date-picker
                                                    show-time
                                                    :v-model="moment(formState.fzxldyjsj)"
                                                    :default-value="moment(formState.fzxldyjsj)"
                                                    :allowClear="false"
                                                    @change="yjTimeChange($event,'fzxldyjsj')"
                                                />
                                            </div>
                                        </div>
                                        <div style="width: 100%;" v-else>
                                            <p>{{ formState.fzxldyj }}</p>
                                            <div class="yjqm-right-bottom">
                                                <img v-if="getUrl('中心领导审核')" :src="getUrl('中心领导审核')" alt="" class="yjqmImg"/>
                                                <span v-else class="yjqmImg">{{ formState.fzxldyjr }}</span>
                                                <span>{{ formState.fzxldyjsj }}</span>
                                            </div>
                                        </div>
                                    </a-form-item>
                                </a-descriptions-item>
                            </a-descriptions>
                        </a-form>
                    </div>
                </div>
            </a-spin>
                <template slot="footer">
                    <div v-if="linkName == '数据修订'">
                        <a-button @click="applicationFormVisible = false" class="blue-btn">关闭</a-button>
                        <a-button class="blue-btn" @click="updataData">确认修订</a-button>
                    </div>
                    <div v-else>
                        <a-button v-if="linkName !== '我的已办'" :loading="bloading" @click="saveClick()">保存</a-button>
                        <a-button v-if="linkName !== '我的已办'" class="blue-btn" type="primary" @click="submitClick()">提交并关闭</a-button>
                        <a-button v-if="linkName == '我的已办'" @click="applicationFormVisible = false">关闭</a-button>
                    </div>
                </template>
        </a-modal>
    </div>
</template>
<script>
import {
    queryJobByJobId,
    tssqsqsaveFlow,
    tssqsqsubmitFlow,
    pidgetlchj,
    getMoreUserSignLinkList,
    editFuntion,
} from './service/index'
import moment from 'moment'
export default {
    data() {
        return {
            applicationFormVisible: false,
            allSpecialList: [],
            summaryActiveKey: '特殊事项',
            cform:this.$form.createForm(this, { name: 'cform' }),
            formState: {},
            formState: {},
            rules:{
                fjbryj: [
                    {
                        required: true,
                        message: '请填写经办人审核意见',
                        trigger: 'blur',
                    }
                ],
                fzxldyj: [
                    {
                        required: true,
                        message: '请填写中心领导审核意见',
                        trigger: 'blur',
                    }
                ],
            },
            bloading: false,
            tloading: false,
            linkName: '',
            imgList: [
                {fhjmc:'经办人审核',url: ''},
                {fhjmc:'中心领导审核',url: ''},
            ],
            moment:moment,
            displayList: [],
            qmImgList: [],
        }
    },
    mounted() {
        // this.circulationDataTableConfig.paramet.oaid = '96db3fccad0245df878468d4339f9e5e'
    },
    methods: {
        getData(val){
            //console.log('我进来啦！！！',val.hjmc)
            if(val.hjmc == '我的已办' || val.hjmc == '数据修订'){
                this.formState = val.oaMap
                this.linkName = val.hjmc
                this.allSpecialList = []
                this.allSpecialList.push(val.oaMap)
                this.getDisplayList()
            } else {
                queryJobByJobId({jobid:val.jobMap.id}).then(res => {
                    this.linkName = res.result.job.fhjmc
                    this.allSpecialList = []
                    this.allSpecialList.push(res.result.sqsx)
                    this.formState = {
                        ...res.result.sqsx,
                        jobid: res.result.job.id
                    }
                    //console.log('???',this.formState.fjbryj)
                    this.getDisplayList()
                })
            }
            // if(val.jobMap){
            //     queryJobByJobId({jobid:val.jobMap.id}).then(res => {
            //         this.linkName = res.result.job.fhjmc
            //         this.allSpecialList = []
            //         this.allSpecialList.push(res.result.sqsx)
            //         this.formState = {
            //             ...res.result.sqsx,
            //             jobid: res.result.job.id
            //         }
            //     })
            // } else {
            //     this.formState = val.oaMap
            //     this.linkName = val.hjmc
            //     this.allSpecialList = []
            //         this.allSpecialList.push(val.oaMap)
            // }
        },
        getDisplayList(){
            pidgetlchj({pid:this.formState.id}).then((res) => {
                let arr1 = res.result
                this.displayList = []
                this.displayList = res.result

                if(this.linkName == '数据修订'){
                    const index = this.displayList.findIndex((item) => item.blzt == '待办');
                    if (index !== -1) {
                        this.displayList.splice(index, 1);
                    }
                    //console.log('this.displayList',this.displayList)
                }

                arr1.forEach(async item => {
                    if(item.blrid && item.blzt!=='待办'){
                        let resa = await getMoreUserSignLinkList({ids:item.blrid})
                        if(resa.success && resa.result.length){
                            if(resa.result[0].signLink == ''){
                                this.qmImgList.push({
                                    hjmc: item.hjmc,
                                    url: null
                                })
                            } else {
                                this.qmImgList.push({
                                    hjmc: item.hjmc,
                                    url: resa.result[0].signLink+'&aa='+Date.now()
                                })
                            }
                        } else {
                        }
                    } else {}
                })
                //console.log('最终获得的签名图片列表---',this.qmImgList)
            })
        },
        opinions(val1,val2,val3){
            //console.log(val1,val2,val3)
            this.$refs[`reviewOpinionsRef${val3}`].getData({opinionType:val1,oldVal:val2,valueData:{hjmc:val3}})
        },
        getInputOpinion(val,valueData){
            //console.log('000',val,valueData)
            let data = this.formState
            data[valueData.hjmc] = val
            //console.log(this.formState)
            this.cform.setFieldsValue({
                fjbryj: this.formState.fjbryj,
                fcwshyj: this.formState.fcwshyj,
                fzxldyj: this.formState.fzxldyj,
                fcnshyj: this.formState.fcnshyj,
            });
            //console.log(this.cform)
        },
        getUrl(hjmcName){
            let url = ''
            this.qmImgList.forEach(item => {
                if(item.hjmc == hjmcName){
                    //console.log('该环节有签名图片',hjmcName,item)
                    url = item.url
                }
            })
            return url
        },
        descriptionsData(hjmc){
            let data = {}
            this.displayList.forEach(item => {
                if(item.hjmc == hjmc){
                    data = {...item}
                }
            })
            return data
        },
        saveClick(){},
        totalPrintClick(){},
        saveClick(){
            this.bloading = true
            let data = {
                jobid: this.formState.jobid,
                map: {},
                oaid: this.formState.id,
                opinion: "",
            }
            //console.log(this.formState)
            if(this.linkName == '经办人审核'){
                data.opinion = this.formState.fjbryj?this.formState.fjbryj:''
                data.map = {
                    fjbryj: this.formState.fjbryj?this.formState.fjbryj:''
                }
            } else if (this.linkName == '中心领导审核'){
                data.opinion = this.formState.fzxldyj?this.formState.fzxldyj:''
                data.map = {
                    fzxldyj: this.formState.fzxldyj?this.formState.fzxldyj:''
                }
            }
            tssqsqsaveFlow(data).then(res => {
                if(res.success){
                    this.$message.success(res.message)
                } else {
                    this.$message.warning(res.message)
                }
                this.bloading = false
            })
        },
        submitClick(){
            //console.log(this.formState)
            this.cform.validateFields((err, values) => {
                if (!err) {
                    let data = {
                        jobid: this.formState.jobid,
                        map: {},
                        oaid: this.formState.id,
                        opinion: "",
                    }
                    if(this.linkName == '经办人审核'){
                        data.opinion = this.formState.fjbryj?this.formState.fjbryj:''
                        data.map = {
                            fjbryj: this.formState.fjbryj?this.formState.fjbryj:''
                        }
                    } else if (this.linkName == '中心领导审核'){
                        data.opinion = this.formState.fzxldyj?this.formState.fzxldyj:''
                        data.map = {
                            fzxldyj: this.formState.fzxldyj?this.formState.fzxldyj:''
                        }
                    }
                    var that = this
                    that.$confirm({
                        title: '您确定要提交吗?',
                        onOk() {
                            that.tloading = true
                            tssqsqsubmitFlow(data).then(res => {
                                if(res.success){
                                    that.$message.success(res.message)
                                    that.$emit('success')
                                    that.applicationFormVisible = false
                                } else {
                                    that.$message.warning(res.message)
                                }
                                that.tloading = false
                            })
                        },
                        onCancel() {},
                    })
                }
            })
        },
        yjTimeChange(val,name){
            let data = this.formState
            data[name] = moment(val).format('YYYY-MM-DD HH:mm:ss')
        },
        updataData(){
            var that = this
            that.$confirm({
                title: '您确定修改当前表单数据吗?',
                onOk() {
                    let data = {
                        id: that.formState.id,
                        fjbryj: this.formState.fjbryj,
                        fjbryjsj: this.formState.fjbryjsj,
                        fzxldyj: this.formState.fzxldyj,
                        fzxldyjsj: this.formState.fzxldyjsj,
                    }
                    //console.log(data)
                    that.spinning = true
                    editFuntion(data).then(res => {
                        if(res.code == 200){
                            that.$message.success(res.message)
                        } else {
                            that.$message.warning(res.message)
                        }
                        that.spinning = false
                    })
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        },
    },
}
</script>
<style lang="less">
.reimbursementApplication-modal-Lu {
    .ant-modal {
        background-color: #5ca3e5;
        position: static;
        width: 100%;
        height: 100%;
        top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 auto !important;
    }
    .ant-modal-content {
        height: 100%;
    }
    .ant-modal-body {
        padding: 15px !important;
        background-color: white;
        overflow-y: scroll;
        height: calc(100vh - 108px) !important;
    }
    .ant-modal-wrap {
        background-color: white;
    }
    .reimbursementApplication-modal-summary-table{
        .tabs-card-edit-box{
            margin: 5px 15px 0 15px;
            .ant-tabs-bar{
                // border: 0 !important;
                border-color: #38f !important;
                margin: 0 !important;
            }
            .ant-tabs-tab{
                background: #edeff3 !important;
                font-size: 14px !important;
                margin-left: 1px !important;
                height: 30px !important;
                line-height: 30px !important;

            }
            .ant-tabs-tab-active{
                margin: 0 !important;
                margin-left: 0 !important;
                margin-right: 1px !important;
                background-color: #38f !important;
                color: #fff !important;
                height: 32px !important;
                border: 1px solid #38f !important;
                border-bottom: 0 !important;
                padding:0 15px !important;

            }
            .ant-tabs-nav-container{
                height: 32px !important;
            }
        }
        .tab-box-v1{
            border: 1px solid #38f;
            border-top: 0;
            margin: 0 15px;
            // height: calc((100vh - 260px) / 2 );
            height: calc(100vh - 500px);
            overflow: auto;
            overflow-y: scroll
        }

        .tabs-card-edit-box2{
            .ant-tabs-tab{
                // margin-right: 5px !important;
                border-bottom-left-radius: 10px !important;
                border-bottom-right-radius: 10px !important;
            }
        }
        .tabs-card-edit-box3{
            .ant-tabs-tab-active{
                background-color: #fff !important;
                color: #38f !important;
            }
        }
        .tabs-card-edit-box4{
            .ant-tabs-tab{
                // margin-right: 5px !important;
                border-top-left-radius: 10px !important;
                border-top-right-radius: 10px !important;
            }
            .ant-tabs-tab-active{
                background-color: #fff !important;
                color: #38f !important;
            }
        }
        .internalControl-reimbursement-summary-1{
            width: 100%;
            padding: 10px 15px;
            .table-hear{
                display: flex;
                font-weight: 600;
                flex-direction: column;
                h3{
                    font-weight: 600;
                    font-size: 22px;
                    text-align: center;
                }
                span{
                    display: inline-block;
                    width: calc(100% - 8px);
                    text-align: right;
                    padding-right: 8px;
                }
            }
            .serviceFee-icon-text-td{
                width: 120px;
            }
            .serviceFee-icon-text{
                display: flex;
                align-items: center;
                padding: 0 5px;
                .serviceFee-icon{
                    color: #5ca3e5;
                }
                span{
                    text-align: center;
                    flex: 1;
                }
            }
            .preview-box {
                width: 60%;
                margin: 0 auto;
            }
            .reimbursement-transportation-table{
                th{
                    text-align: center;
                    font-size: 16px;
                    padding: 3px 5px;
                }
                td{
                    text-align: center;
                    padding: 3px 5px;
                    height: 40px;
                    font-size: 16px;
                }
                .special-table-lable-td{
                    background-color: #e6f7ff;
                    width: 150px !important;
                }
            }
        }
        .travelReimbursementForm-print-box {
            font-size: 14px;
            font-family: 宋体;
            color: black;
            h1 {
                text-decoration: underline;
                text-align: center;
                color: #5ca3e5;
            }
            .travelReimbursementForm-table {
                width: 100%;
                text-align: center;
                table-layout: fixed;
                td {
                // min-width: 10px;
                padding: 0 !important;
                }
            }
            table {
                border-color: #5ca3e5;
                border-top: 2px solid #5ca3e5;
                border-left: 2px solid #5ca3e5;
                border-right: 2px solid #5ca3e5;
                border-bottom: 2px solid #5ca3e5;
            }
            h1 {
                color: #5ca3e5;
                font-weight: bold;
                letter-spacing: 4px;
                // font-size: 35px;
            }
            .Title {
                color: #5ca3e5;
                // font-weight: bold;
                text-align: center;
            }
            .letterSpan {
                // letter-spacing: 8px;
            }
            .td-rowspan {
                width: 1px !important;
                min-width: 1px !important;
                padding: 1px 0;
            }
            .travelReimbursementForm-print-title-box {
                display: flex;
                justify-content: space-between;
            }
        }
        .applicationForTransferForm-print-box {
            font-size: 18px;
            font-family: 宋体;
            color: black;
            h1 {
                text-align: center;
            }
            .applicationForTransferForm-table {
                width: 100%;
                text-align: center;
                // table-layout: fixed;
                th {
                padding: 10px 5px !important;
                }
                td {
                min-width: 10px;
                padding: 5px !important;
                }
            }
            table {}
            h1 {
                font-weight: bold;
                letter-spacing: 4px;
                // font-size: 35px;
            }
            .Title {
                color: #5ca3e5;
                // font-weight: bold;
                text-align: center;
            }
            .letterSpan {
                // letter-spacing: 8px;
            }
            .td-rowspan {
                width: 1px !important;
                min-width: 1px !important;
                padding: 1px 0;
            }
        }
    }
    .internalControl-reimbursement-model-form-box {
        padding: 0 15px;
        margin-top: 20px;
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 88px !important;
            text-align: right;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            .ant-form-item {
              margin-bottom: 0 !important;
            }
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 120px !important;//确保左侧固定文字不会换行
            justify-content: center;
        }
        .xhText{
            display: inline-block;
            color: #f5222d;
            line-height: 31px;
            padding-right: 2px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{

        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }
        .yjqm-right-bottom {
            float: right;
            margin-right: 20px;
            margin-bottom: 10px;
            line-height: 30px;
        }
        .yjqmImg {
            width: 100px;
            height: 30px;
            padding-right: 20px;
        }
    }
}
</style>
